<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./output.css">
</head>

<body>
    <div class="container">
        <div class="relative rounded-xl overflow-auto flex flex-col p-4 gap-4">
            <h2>content-start</h2>
            <div
                class="grid grid-cols-3 gap-4 content-start w-full rounded-lg bg-stripes-purple text-center h-56 bg-gray-100">
                <div class="p-4 shadow-lg rounded-lg bg-purple-500">01</div>
                <div class="p-4 shadow-lg rounded-lg bg-purple-500">02</div>
                <div class="p-4 shadow-lg rounded-lg bg-purple-500">03</div>
                <div class="p-4 shadow-lg rounded-lg bg-purple-500">04</div>
                <div class="p-4 shadow-lg rounded-lg bg-purple-500">05</div>
            </div>
            <h2>content-center</h2>
            <div class="font-mono text-white text-sm font-bold leading-6">
                <div
                    class="grid grid-cols-3 gap-4 content-center w-full rounded-lg bg-stripes-sky text-center h-56 bg-gray-100">
                    <div class="p-4 shadow-lg rounded-lg bg-sky-500">01</div>
                    <div class="p-4 shadow-lg rounded-lg bg-sky-500">02</div>
                    <div class="p-4 shadow-lg rounded-lg bg-sky-500">03</div>
                    <div class="p-4 shadow-lg rounded-lg bg-sky-500">04</div>
                    <div class="p-4 shadow-lg rounded-lg bg-sky-500">05</div>
                </div>
            </div>
            <h2>content-end</h2>
            <div class="font-mono text-white text-sm font-bold leading-6">
                <div
                    class="grid grid-cols-3 gap-4 content-end w-full rounded-lg bg-stripes-pink text-center h-56 bg-gray-100">
                    <div class="p-4 shadow-lg rounded-lg bg-pink-500">01</div>
                    <div class="p-4 shadow-lg rounded-lg bg-pink-500">02</div>
                    <div class="p-4 shadow-lg rounded-lg bg-pink-500">03</div>
                    <div class="p-4 shadow-lg rounded-lg bg-pink-500">04</div>
                    <div class="p-4 shadow-lg rounded-lg bg-pink-500">05</div>
                </div>
            </div>
            <h2>content-between</h2>
            <div
                class="grid grid-cols-3 gap-4 content-between w-full rounded-lg bg-stripes-violet text-center h-56 bg-gray-100">
                <div class="p-4 shadow-lg rounded-lg bg-violet-500">01</div>
                <div class="p-4 shadow-lg rounded-lg bg-violet-500">02</div>
                <div class="p-4 shadow-lg rounded-lg bg-violet-500">03</div>
                <div class="p-4 shadow-lg rounded-lg bg-violet-500">04</div>
                <div class="p-4 shadow-lg rounded-lg bg-violet-500">05</div>
            </div>
            <h2>content-around</h2>
            <div class="font-mono text-white text-sm font-bold leading-6 bg-gray-100">
                <div
                    class="grid grid-cols-3 gap-x-4 content-around w-full rounded-lg bg-stripes-blue text-center h-56 bg-gray-100">
                    <div class="p-4 shadow-lg rounded-lg bg-blue-500">01</div>
                    <div class="p-4 shadow-lg rounded-lg bg-blue-500">02</div>
                    <div class="p-4 shadow-lg rounded-lg bg-blue-500">03</div>
                    <div class="p-4 shadow-lg rounded-lg bg-blue-500">04</div>
                    <div class="p-4 shadow-lg rounded-lg bg-blue-500">05</div>
                </div>
            </div>
            <h2>content-evenly</h2>
            <div class="font-mono text-white text-sm font-bold leading-6">
                <div
                    class="grid grid-cols-3 gap-x-4 content-evenly w-full rounded-lg bg-stripes-blue text-center h-56 bg-gray-100">
                    <div class="p-4 shadow-lg rounded-lg bg-blue-500">01</div>
                    <div class="p-4 shadow-lg rounded-lg bg-blue-500">02</div>
                    <div class="p-4 shadow-lg rounded-lg bg-blue-500">03</div>
                    <div class="p-4 shadow-lg rounded-lg bg-blue-500">04</div>
                    <div class="p-4 shadow-lg rounded-lg bg-blue-500">05</div>
                </div>
            </div>

            <h2>content-stretch </h2>
            <div class="grid grid-cols-3 gap-4 content-stretch w-full rounded-lg bg-stripes-fuchsia text-center h-56">
                <div class="p-4 flex justify-center items-center shadow-lg rounded-lg bg-fuchsia-500">01</div>
                <div class="p-4 flex justify-center items-center shadow-lg rounded-lg bg-fuchsia-500">02</div>
                <div class="p-4 flex justify-center items-center shadow-lg rounded-lg bg-fuchsia-500">03</div>
                <div class="p-4 flex justify-center items-center shadow-lg rounded-lg bg-fuchsia-500">04</div>
                <div class="p-4 flex justify-center items-center shadow-lg rounded-lg bg-fuchsia-500">05</div>
            </div>

            <h2>content-normal </h2>
            <div class="grid grid-cols-3 gap-4 w-full rounded-lg bg-stripes-indigo text-center h-56">
                <div class="p-4 flex justify-center items-center shadow-lg rounded-lg bg-indigo-500">01</div>
                <div class="p-4 flex justify-center items-center shadow-lg rounded-lg bg-indigo-500">02</div>
                <div class="p-4 flex justify-center items-center shadow-lg rounded-lg bg-indigo-500">03</div>
                <div class="p-4 flex justify-center items-center shadow-lg rounded-lg bg-indigo-500">04</div>
                <div class="p-4 flex justify-center items-center shadow-lg rounded-lg bg-indigo-500">05</div>
            </div>
        </div>
    </div>
    <h2>
    </h2>
    <div class="container">

    </div>


</body>

</html>